


Personal Experiment with HTML and CSS

by MohnblumenKind



Category: No Fandom
Genre: CSS, Choose Your Own Adventure, Experimentation, Fanwork Research & Reference Guides, Gen, HTML, Work Formatting
Language: English
Status: In-Progress
Published: 2018-08-14
Updated: 2018-12-09
Packaged: 2019-06-27 12:05:14
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 7
Words: 3,904
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/15685086
Author URL: https://archiveofourown.org/users/MohnblumenKind/pseuds/MohnblumenKind
Summary: This is a personal experiment with HTML. It is a very limited list with what I find useful.Update:Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs.So far that's posted:Part One: BasicsPart Two: LinesPart Three: Footnotes and LinksPart Four: Columns and SkinsPart Five: PicturesPart Six: Choose Your Own Adventure





	1. Part One: Basics

**Notes for the Chapter:**

> Rich Text does sometimes not work properly (like making too many line breaks), so I personally started to look up HTML to control whether AO3 converted it right. Therefore, I made a list of what I personally might need in my fanfiction.  
> There is a better guide called [A Complete Guide to 'Limited HTML' on AO3](https://archiveofourown.org/works/5191202/chapters/11961779).  
> This work will be updated all the time as soon as I find something new that I need in my fics. This is my personal playground, so I won't accidentally destroy the formatting of one of the other fics while testing new stuff or I won't forget what I found out.

My personal favorite:

Text justify (Blocksatz). I need it to write all fanfiction since text simply has to be in this style (university destroyed my aesthetics). You'll only see it if the text is long enough to fill more than one line of this page. Then you'll see that this text neatly aligns with both sides of the page. That's usually used for research papers and books, but I think "dream big" ;) If you don't use this then the text will automatically align to the left side. There is a code for right-aligned text, too, but who needs this anyway... You can make this with using Skins, too, but these can be deactivated by the readers or might work against their Site Skins, as far as I understood. So I rather use this. Copy and Paste is your friend!  
written like this: <p align="justify">Text</p>

  


Text in the center (for headlines for example. I like to use it together with a short underline)  
written like this: <p align="center">Text</p>

  


this code opens a paragraph (basically everything starts with this). And it needs to be closed, as well.  
written like this: <p>Text</p>

line breaks are very important, too. Usually always usable (within paragraphs for example) since it does not need to be closed.  
written like this: <br />

  


_I usually use italic for foreign words or sentences. Or to emphasize certain words. (Btw: <br /> ends the bold or italic-section automatically, so you need it more than once if you have a larger paragraph in italic)_  
written like this: <em>Text</em>

  


**text in bold**  
written like this:  <strong>Text</strong>

  


I never thought I needed it, but apparently, that's the case now. So here ~~text that someone tried to delete~~.  
written like this:  <strike>Text</strike>

  


Text in big and in small is possible as well without changing much.  
written like this: <big>Text</big>  
written like this: <small>Text</small>

  


`this makes a special style of text (otherwise you have to create a Work Skin. That's probably better anyway)`  
written like this: <tt>Text</tt>

  


This is a test for Work Skins (and it works). Its complicated and simple at the same time. There is a ["A Step-by-Step Guide to Work Skins"](https://archiveofourown.org/admin_posts/1370) made by the archive for further information. (And I am happy that links work within using skins, too!)

On how to create links, look at the [third chapter](https://archiveofourown.org/works/15685086/chapters/39715242). For further explanation about font and Work Skins, look at [Chapter 4](https://archiveofourown.org/works/15685086/chapters/39687930#workskin).  


written like this: <p class="textmono">Text</p>  
and "textmono" is the name I gave my Work Skin. With this you are able to use different fonts inside your fic, which is quite cool if you are a bit experimental. The problem is that others might see it differently depending on their settings, as far as I understood it. I don't see the same font on the computer and the mobile phone, too. More on this in other chapters. 

**Achtung: Work Skins and some HTML don't work when the story is downloaded!** The reader will not be able to use or see a lot of the features. This first chapter with the Basics works best even if it is downloaded, so in that case "tt" is a good alternative for a different font. In the next chapter with the lines will only the first one be visible after the story is converted as a pdf. 

Some interesting thing: If you want glitch text, there is a website that generates the HTML for you. I haven't looked further into it, I just wanted to save it here.  
 [Zalgotextgenerator](https://www.zalgotextgenerator.com)

It looks like this:  
  
  
h̵̨̡̟̟͈̟̜̣̣̺̎̽̇͑̏̾͡ę̩̗͍̰͓̬̝̞͗̽͊͑̈̂͘͜l̵͓̦̼͇͇͎̋̀͆̓̓͌͘͢l̴̺̥̥̗͓̘̰̦͌̓̇̓̉͗͗̊ö̸̝̙͈̗͈̻̙̇͊̿̓̑ t̵̠͍̥̬̫̙͖͉̽̃̽͆̎́͜ͅḩ̦̻̲̮̱̌̋̂͋͐̍̒͠ͅę̬̲̣̼͕̟̣͖̓̂̉̓͐̎͞͝r̷̝͇͇̯̣̍͛̈́̉̓̚͜͟ͅė̝͉̰̫̞̖͂͐͆̂̇͐̌

  
  


This changes the place of the text, important for footnotes or dates   
written like this: <sup>Text</sup>

  


This, too.I just can think of chemical formula where this could be used...  Like H2O  
written like this: <sub>Text</sub>

  


Now I try to make spaces:     that is really strange...  
they vanish as code in HTML, but stay in the fic  
written like this: (and symbol)nbsp;(and symbol)nbsp; 

"(and symbol)" means &.  
These are two times the symbol for a space, but in my experience, I need a lot of them if I want some fancy formatting. So Copy & Paste it is (After inserting & in that example above). 


	2. Part Two: Lines (for headlines for example)

Lines are very useful, too.

underlined, short and in the middle. Looks better with centered text

* * *

written like this: <hr />

### underlined twice, the whole page. Sadly wrong font

written like this: <h3>Text</h3>

###### underlined once, the whole page. Same here.

Funny thing: you can use the lines without text to separate the story with a long line in contrast for example to the shorter one above.

written like this: <h6>Text</h6>

  


just normal text underlined. Haven't used so far  
written like this: <ins>Text</ins>

  


     Text moved to the right. Might be interesting for longer quotations
  
written like this: <dd>Text</dd>

  


> this one is similar, but with a funny line in front of it. Very interesting

  
written like this: <blockquote><p>Text</p></blockquote>  
  



	3. Part Three: Footnotes and Links

Footnotes and links can be important to improve your work. I use links frequently here, but in my fanfics, too. It is nice for readers not to Copy and Paste long links, moreover, when using their mobile phones. With this I usually link other work on AO3 or authors (imagine someone was so kind to translate your work. Wouldn't it be better if others could just click on the link to find it instead of searching for it on the internet or using their finger or mouse. It's the internet, we're all lazy).  
I haven't used the footnotes so far, but they are very useful when you use foreign language frequently and your fic is very long or when you let Bartimaeus speak (you guys know what I mean). There's not much that is worse than scrolling down a huge chapter (and later try to return to your line). So here is the solution.

See more about footnotes (like different symbols) in [How to Make Linked Footnotes on AO3 ](https://archiveofourown.org/works/4579026/chapters/10429149). Surprise! That's a link.  
It is written like this: <a href=Here goes the URL>Here goes the name you choose</a>

The footnotes work, but the code is not nice. (rel="nofollow" pops up with the link and footnote in the HTML code when posted and so far I haven't figured it out. If I use it one day, I'll improve it.)

Text. Here needs to be a footnote. Not just superscript but with a link to the notes. [1]  
written like this: <a name="return1" id="return1"></a>Text<sup>[<a href="#note1" title="click to see footnote" >1</a>]</sup>

Here needs to be the second footnote. Just change every 1 into 2. [2]  


**Notes for the Chapter:**

> 1 Footnote here. You have to be able to return to the text! [return to text]
> 
> written like this:<a name="note1" id="note1"></a>1 Footnote here.<sup>[<a href="#return1" title="return to text" >return to text</a>]</sup>
> 
> You probably can use "sup" in front of the text of the footnote for the numbers, too, so that they will be placed like proper footnote numbers should be. But improvement is always possible.
> 
> 2 Second Text[return to text]


	4. Part Four: Columns and Skins

With HTML you can only come that far (see the last three chapters). So when you want to be even more experimental, you'll need Work Skins. I started to talk about this in the first chapter while shortly mentioning different font.  
So now I wanted a different font and then columns and why not color, too? (I don't think I'll ever use the last one, but why not testing it here?). So for that you'll need to create Works Skins with CSS. More down there. Now the example first:

Dear Diary  
I suppose that there should be more text here. Anyway, this is Courier New in bold. I wanted some other font, but that is so far not working. 

_Dear Diary  
I should probably use that Latin text, so I don't have to ramble here. The texts are supposed to be different here, yet they don't have to. That was just my choice while writing the skins. I wanted some fine handwriting, but since that's not working for now, this is now Times New Roman in italic. _

I got frustrated with the font, so I decided to use columns instead. At least that's working now :)

So, you'll need Work Skins for this, too. Skins are a very good thing on AO3 in contrast to other websites for fanfictions. But it is not always so easy to use. I usually copy and paste stuff from others and then try to understand it with experiments and other HTML guides on the internet. So far some stuff is working and other not (like fancy font).  
There is a FAQ on AO3 on how to create Skins. [Here](https://archiveofourown.org/admin_posts/80) and [here, just go to 'How do I create a work skin?'](https://archiveofourown.org/faq/skins-and-archive-interface?language_id=en#createsiteskin)

The summary: Go to your 'Dashboard' -> 'Skins' -> 'My Work Skins' -> 'Create Work Skin', then give it a fancy name and fill the CSS with the stuff you copied somewhere. For example the Skin that is written down here ^^

After you created it, you have to attach the Skin to your work with the button 'Select Work Skin' that you'll see while creating a new work (or editing it). In the fic itself you have to add the HTML to activate the CSS. Therefore, below here first there comes the Skin that you can copy (and create an own Skin with it) and then there is the HTML that you also need to copy and paste into your fic.  
It's worth the work, trust me.

[That's the fic with columns.](https://archiveofourown.org/works/149319)

The Skin that is used here looks like this:

#workskin .splitscreen { width: 100%; }

#workskin .splitscreen .left {  
width: 48%;  
float: left;  
padding: 0;  
text-align: justify;  
font-family: "Courier New", Courier, monospace;  
font-weight: bold;  
}

#workskin .splitscreen .right {  
width: 48%;  
float: right;  
padding: 0;  
text-align: justify;  
font-family: "Times New Roman", Times, Serif;  
font-weight: italic;  
color: red;  
}

#workskin .row:after { content: ""; display: table; clear: both; }

The second and third part with the # describes the two columns. The last # is important because it ensures that the text after the columns is beneath both. Otherwise, the text might slip into one of the columns and that looks bad. Moreover, since different devices sometimes change spaces and such.  
Explanation: After every ; you can add something. I added font-family to have a different one than the one the archive displays on default.  
And there is justify in it because I need it anyway. The width is variable. One can make one column bigger than the other.  
If you ask yourself where the last 4% are (100% - (48+48)), I did, too. It turns out that this is the space between the columns and it is very important, otherwise, it would look strange.  
Italic or bold style can be written in that, too. I added "font-weight: bold;" beneath the font-family in column 1, instead of writing "strong" in HTML, so that is possible. If just some part should be bold, you can use what you learned in the first chapter.  
Same works for color or else. I inserted "color: red;" beneath the font-family of the second column and you see what happened. It is quite easy to use, the basic colors have their normal names. If you want more, look at the "Public Work Skins" in the archive. Or follow that link [here.](https://archiveofourown.org/skins/229)  
If you want to know what the Archive says about stuff like color and so on, see [here.](https://archiveofourown.org/faq/skins-and-archive-interface?language_id=en#cssproperties)  
There is a list with codes for the colors that you can use. It's [here.](www.w3schools.com/colors/colors_names.asp)

In this work here, this is what I wrote in HTML:  
<div class="splitscreen">  
  
<div class="row">  
  
<div class="left">  
<p>Text for column 1 in bold</p>  
</div>  
  
<div class="right">  
<p>Text for column 2 in italic</p>  
</div></div></div>

  


* * *

  
Now back to changing the font.  
In the first chapter I talked shortly about fonts. Now a longer explanation:  
The Archive has default settings and that includes a certain font. But maybe you want to use a different one in your fic?  
Anyway, you'll have to create a Work Skin like with the columns if you want to change the font.  
  
The Work Skin might look like this:  
#workskin .textmono {  
font-family: "Courier New", Courier, monospace;  
}  
  
You'll see that I inserted "font-family" in the CSS for the columns, too. But now you just want a different font for some sentences and not all the other useless features.  
After creating the Work Skin, you'll need to use the HTML in your fic. I've named my workskin "textmono", so that's what I have to call it if it should appear.  
  
It is written like this:  
<p class="textmono">Text</p>  
  
and looks like this:  


This is monospace 

  
Notice the common rules from chapter one: There needs to be an opening and endig for a feature. So the normal paragraph is <p>Text</p>.  
This changes now to what you see above.  
You could just write one paragraph in that font and the next one normal again, because everything after </p> will be default setting again.  
So what if you want to change font within ONE sentence?  The problem with p is, that every paragraph has spaces before and after. That'll destroy your sentence.  
For this you just have to change the HTML. At least, you can keep the Work Skin, yay!

Instead of starting a paragraph you have to use <span> which creates an own section. You have already seen the example.  
It is written like this:  
<span class="textmono">Text</span>


	5. Part Five: Pictures

The alternative name would be "Things I don't use, but wish others would".  
I've got it from this [guide](https://archiveofourown.org/works/15078095/chapters/34959014).  
The autor of the fic above shows good examples of cases where this skin is used and not. The difference is huge!  
The skin you are supposed to create (and use) when you post a picture on AO3 is this:  
  
img {  
max-width: 100%;  
height: auto;  
}  
  
That's quite important, IMO, because otherwise the pictures might be annoying to your readers because maybe their monitor is smaller or they are using their mobile phones and then they won't be able to enjoy the picture at all. It is always a surprise when pictures are used and it is nice. So if you as an author are already making all that work to post a picture, then this won't be so much more work!

  
To post a picture you can read the FAQ by the archive [here](https://archiveofourown.org/faq/posting-and-editing?language_id=en#embedimage).

Or just use this HTML code:  
<img src="Here goes the URL of your image" alt="Here goes the description" />  
  
The description will be invisible.  
AO3 can not host images, therefore, you need the URL, meaning, you need to post or select a picture from another website (for now? After all, AO3 is still in beta? I have no idea whether this will be changed one day. So far I guess that works fine, too).  
Here is an example of an image (Lithuania from Hetalia: Axis Powers, picture from [Hetalia Archives](http://hetalia.kitawiki.net/index.php?title=File:Lithuania.png) ). Not that surprising!  
  
Another example:   
  
This last picture ([here](http://hetalia.kitawiki.net/index.php?title=File:TBW-YoungPrussia.png)) is very large (the Teutonic Order would call it 'awesome'). If I would not have used the Work Skin I showed you previously, that picture would not be displayed completely. If you change the size of the window of your browser (I am not familiar with the English terms for that stuff) then you'll see that the image will always be completely visible. That would not be the case if you just insert it.  
Or just click "Hide Creator's Style". That disables the Work Skin I used on this fic and will destroy all my fancy visuals. Then you'll see that this picture won't fit anymore (depending whether you use your mobile phone or a small laptop. If you work at NASA or somewhere alike then congratulations on huge screens. You should probably be working, though ^^ ).  
  
Anyway, this skin makes it possible to see the picture you have chosen to display with whatever device or size of window your readers will have.

**Notes for the Chapter:**

> The Trakai Island Castle, to see whether the pictures work in the notes, too.
> 
> Photo by DAVID ILIFF. License: [CC-BY-SA 3.0](https://creativecommons.org/licenses/by-sa/3.0/)


	6. Part Six: Choose Your Own Adventure 1

You have probably seen a "Choose Your Own Adventure"-story on AO3 already. With this the readers can decide what your characters are going to do. The disadvantage in my opinion is the optics a lot of the time because the readers might see further parts of the story. But that is not this case here. 

1\. This is going to be a guide on how to create a "Choose Your Own Adventure"-story. I like to write one myself, so I need some experiments beforehand. I used La_Temperanza's skin, but will change some stuff (if I'm able to). This person is truly a master, so here the [link](https://archiveofourown.org/works/11514573).  
(The number in the beginning is just so that I can see quickly whether the jumping works)

Click here to continue  
Click to jump to the Skin  
Click to jump to the HTML

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2\. Their skin is awesome because instead of simply jumping within the story, it does more!  
  
First things first: With the normal links (see the other Chapter) you could create a "Choose Your Own Adventure"-story. **But** that way, the reader could scroll down accidentally or on purpose and read all your stuff. Therefore, this awesome person created a skin that hides the rest of the story. Now no one can cheat while reading your story (except for clicking on "Hide Creator's Style").  
  
So, what happens?  
When you scroll down then there is the end of the fic, not the rest of the text. So you can write your story and if there are too many lines, there will be a bar at the right side to scroll further down in this story (see next part). This works on different devices and will make a box for your story.  
It works fine on mobile devices for example and one can scroll either with the bar or with the fingers as long as you stay in the box.  
The bar might look strange if the reader has a Site Skin activated, but it will still work, so everything is fine, IMO.  
I thought the box was a little too small (my story is going to have larger chapters than just two paragraphs), so I will try to adapt the skin. Instead of the 300px and 250px in the Work Skin, I changed it to 600px and 550px so far. As a result, you won't see a bar in this page, but on the next. And if the text is too short, there will be lots of empty space, but that was to be expected. I like it better because now you don't see the comment-section and the buttons in the middle of the screen all the time while your story window is too small.  


Continue to the Skin  
Click here to go to the HTML  


 

 

 

 

 

 

 

 

 

3\. I have not figured it out myself completely, so I just post it with the little change I managed to do. There might be an update as soon as I have enough time and actually understand it (self-teaching is hard, even though there are wonderful people out there that post stuff like this to help us).  
So. You need to Copy and Paste the stuff down there (if it is hard to copy the text, you can klick "Hide Creator's Style") and create a Work Skin with it (there is a [FAQ](https://archiveofourown.org/admin_posts/80) on how to create a Work Skin on AO3).  
I inserted "text-align: justify;" because my stories need to use justify. I am not completely happy, because that means the words touch the bar on the right side and that hurts my aesthetics. I'm working on it.  
  
#workskin .storycontainer {  
margin: 0 auto;  
overflow: hidden;  
width: 100%;  
height: 600px;  
text-align: justify;  
}  
  
#workskin .page {  
margin-top: 25px;  
height: 550px;  
overflow-y: auto;  
}  
  
#workskin .page::-webkit-scrollbar {  
-webkit-appearance: none;  
}  
  
#workskin .page::-webkit-scrollbar:vertical {  
width: 12px;  
}  
  
#workskin .page::-webkit-scrollbar:horizontal {  
height: 12px;  
}  
  
#workskin .page::-webkit-scrollbar-thumb {  
background-color: rgba(0, 0, 0, .5);  
border-radius: 10px;  
border: 2px solid #ffffff;  
}  
  
#workskin .page::-webkit-scrollbar-track {  
border-radius: 10px;  
background-color: #ffffff;  
} 

  
  


Back to the start  
Click here to go to the HTML

 

 

 

 

 

 

 

 

 

 

 

 

 

4\. Now, as soon as you have created that Work Skin, you'll need your story.  
Since you can only use one Work Skin per fic, I have inserted all the CSS I need for my features in this guide in one Work Skin. That is fine because the features are only activated when you use their name in HTML. Nonetheless, I personally have an own Work Skin for each fic because it makes it easier to change it separately.  
Anyway, now here the HTML you need to use:  
Don't forget to insert a lot <br /> between the pages, because that helps them vanish and even if Creator's Style is turned off, the reader can still not see the whole story immediately.  
  
<div class="storycontainer">  
<div class="page"><p>  
<a name="pageone" id="pageone"></a>Text of page one</p>  
  
<p><a href="#pagetwo">Link to page two</a><br>  
<a href="#pagethree">Link to page three</a></p></div>  
  
**(put a lot of breaks here: <br />) ******  
  
<div class="page"><p>  
<a name="pagetwo" id="pagetwo"></a>Text of page two</p>  
  
<p><a href="#pageone">Back to page one</a></div>  
<p><a href="#pagethree">Continue to page three</a></p></div>  
  
**(put a lot of breaks here: <br />) ******  
  
<div class="page"><p>  
<a name="pagethree" id="page"></a>Text of page three</p>  
  
<p><a href="#pageone">Back to page one</a></p></div></div>  
  


************

Click here to go to the Skin  
Back to the start

 ** ** ********


	7. Part Six-and-a-Half: Choose Your Own Adventure 2

This is the second Chapter to test how to jump Chapters within a "Choose Your Own Adventure"-story.

5\. The first link down there makes it possible to jump back to the beginning of the story, for example. The advantage: It even jumps chapters and can pick the right part in this chapter, too. Therefore, you can jump freely in your story.  
I am thrilled, because now I can write a very confusing story-line and am still able to let the reader jump to wherever I want them to.  
  
The link looks like this:  
<a href="URL you want to go#name of the page">Text that you want to be displayed</a>  
  
The name of the page is "pagetwo" in this case. It's whatever you named your pages in the last chapter. You see, it is just a simple link, like in one of the other chapters, except for the specification of the exact spot you want your readers to jump to.  


[Return to Part Two in Chapter Six](https://archiveofourown.org/works/15685086/chapters/39753822#pagetwo)  
There can be text before this link to the next part of the story, so I can insert it in a sentence. That might look better than just options at the end. Story flow and such.  
Just experiments, nothing there. Serious, just a different font and color, you already know how to do this.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6\. Just some more experiment.  
I wanted the jump to look better, so I inserted breaks before the number. That way there will be some space on top.  
Just aesthetics.  
The problem is that this work-around only works when the bar appears. Therefore, this text has to be long enough to trigger the bar. Then, you'll see the breaks I use. Or not. I'm on it. 

Return

 

 

 

 

 

 

 

 

 

 

 

 

 

 

7\. Nothing to see here.  
Author's note: Here will be important information that is red and written in monoscript  
That's just the normal font- and color-change I've explained in the chapter "Columns and Skins". I just wanted to find out whether it works within these boxes. And it does. I used "span" because I did not want to meddle with the paragraphs, but "p" works fine, too.

Return


End file.
